<script>

export default {
  data() {
    return {
      show: false,
      requestParam: {
        // 系列ID
        seriesId: null,
        // 技能等级id
        skillLevelId: null,
        // 名称
        name: "",
        // 数值
        number: 0,
      },
    };
  },
  methods: {
    open(requestParam) {
      this.requestParam = requestParam;
      this.show = true;
    },
    close() {
      this.show = false;
    },
    save() {
      if (!this.requestParam.name) {
        this.$message.error("请输入名称");
        return;
      }
      if (!this.requestParam.number) {
        this.$message.error("请输入数值");
        return;
      }
      if (!this.requestParam.fileIdOfIcon) {
        this.$message.error("请上传图标");
        return;
      }
      this.$kt.requestSecurity.send({
        uri: "/business-talent-web/admin/titleLevel/save",
        data: this.requestParam,
        stateSuccess: (res) => {
          this.$message.success("保存成功");
          this.$emit("saveSuccess");
          this.close();
        },
        stateFail: (res) => {
          this.$message.error(res.errMsg);
        }
      });
    },
    uploadImg() {
      this.$kt.file.chooseImageOne().then(res => {
        let loading = this.$loading({
          lock: true,
          text: '上传中...',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.$kt.request.uploadFile({
          file: res.file,
          groupCode: "talentTitleLevel",
          stateSuccess: (res) => {
            this.requestParam.fileIdOfIcon = res.data.id;
            loading.close();
          },
          stateFail: (res) => {
            loading.close();
            this.$message.error(res.errMsg);
          }
        });
      });
    },
  },
}
</script>

<template>
  <el-dialog
      v-model="show"
      width="300px"
      title="新增/编辑职称等级">
    <el-form label-position="top">
      <el-form-item label="名称">
        <el-input v-model="requestParam.name"></el-input>
      </el-form-item>
      <el-form-item label="数值">
        <el-input v-model="requestParam.number"></el-input>
      </el-form-item>
      <el-form-item label="图标">
        <div class="icon-box">
          <el-image
              :preview-src-list="[$kt.file.visit(requestParam.fileIdOfIcon)]"
              v-if="requestParam.fileIdOfIcon"
              class="icon-img"
              :src="$kt.file.visit(requestParam.fileIdOfIcon)"/>
          <div
              @click="uploadImg"
              class="icon-edit">更改/添加
          </div>
        </div>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</template>

<style scoped lang="scss">
.dialog-footer{
  text-align: right;
}

.icon-box {
  width: 100px;
  height: 100px;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  display: inline-block;
  position: relative;

  .icon-img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
  }

  .icon-edit {
    position: absolute;
    width: 100%;
    text-align: center;
    bottom: 0;
    background-color: rgba(0, 0, 0, .8);
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    border-radius: 0 0 10px 10px;
  }

  .icon-edit:hover {
    background-color: rgba(0, 0, 0, .5);
  }

  .icon-edit:active {
    background-color: rgba(0, 0, 0, .3);
  }
}
</style>